<template>
	<!-- 添加高度100%的根view -->
	<view
		style="width: 100%; height: 100vh; background-color: rgb(247,247,247); display: flex; flex-direction: column;">
		<!-- 图片部分 -->
		<view>
			<u--image :showLoading="true" :src="src" width="100%"></u--image>
		</view>

		<!-- 表单部分 -->
		<view style="flex: 1; padding: 20rpx; box-sizing: border-box;">
			<u--form :model="userInfo" ref="uForm" :rules="rules">
				<view style="margin-bottom: 10rpx;">
					<u-form-item prop="userName" :rules="rules">
						账号：
						<u--input v-model="userInfo.userName" placeholder="请输入账号" prefixIcon="account"
							prefixIconStyle="font-size: 22px;color: #909399"
							style="width: 100%; background: #fff; border-radius: 8rpx; padding: 20rpx;"></u--input>
					</u-form-item>
				</view>

				<view>
					<u-form-item prop="password" :rules="rules">
						密码：
						<u--input v-model="userInfo.password" placeholder="请输入密码" prefixIcon="lock" password
							prefixIconStyle="font-size: 22px;color: #909399"
							style="width: 100%; background: #fff; border-radius: 8rpx; padding: 20rpx;"></u--input>
					</u-form-item>
				</view>
			</u--form>
			<view>
				<u-button type="success" text="登陆" style="margin-bottom: 20rpx;" @click="Submit"></u-button>
				<u-button type="primary" text="注册"></u-button>
			</view>
		</view>
 <u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import http from '../../http'
	export default {
		data() {
			return {
				userInfo: {
					userName: "student",
					password: "123456",
					remember: false
				},

				rules: {
					"userName": {
						type: "string",
						required: true,
						message: "请填写账号",
						trigger: ["blur", "change"]
					},
					"password": {
						type: "string",
						required: true,
						message: "请填写密码",
						trigger: ["blur", "change"]
					}
				},
				src: "https://img0.baidu.com/it/u=3971339170,3607782414&fm=253&app=138&f=JPEG?w=1483&h=800",
			}
		},
		methods: {
			Submit() {
				this.$refs.uForm.validate().then(res => {
					console.log(this.userInfo);
					http({
						url: "/api/user/login",
						method: "post",
						data: this.userInfo
					}).then(res => {
						console.log(res);
						if (res.code === 1) {
							this.$refs.uToast.show({
								type: "success",
								message: "登陆成功",
								iconUrl: "https://uviewui.com/demo/toast/success.png",
								complete() {
									console.log(1);
									uni.switchTab({
										url: "/pages/Demo1/Demo1"
									})
								},
							});

						}else{
							this.$refs.uToast.show({
								type: "error",
								message: res.message,
								iconUrl: "https://uviewui.com/demo/toast/error.png",
								complete() {
								},
							});
						}
					})
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style>
	/* 关键修复：设置页面根元素高度 */
	page {
		height: 100%;
	}
</style>